<template>
  <ScalablePage>
    <template #default="{ scale }">
      <div class="resolution">
        <FirstLevelTitle text="大坝信息"></FirstLevelTitle>
        <div style="display: flex;align-items: baseline; align-items: flex-start">
          <!-- 实时水情 -->
          <div>
            <secondary-title text="水洞沟水库"></secondary-title>
            <div class="water-situation">
            </div>
          </div>
          <!-- 长城调蓄水池 -->
          <div>
            <secondary-title text="长城调蓄水池"></secondary-title>
            <div class="sedimentation">
              <div v-if="line > 1168" class="dashed-text-1">液位:{{ line }}</div>
              <div v-else class="dashed-text-2">液位:{{ line }}</div>
            </div>
          </div>
        </div>
        <div class="slider-demo-block">
          <!-- <FixedSlider v-model="value" :step="10" :marks="marks" :max="90" show-stops style="margin-right: 20px;" /> -->
          <!-- <el-select v-model="values" placement="bottom" allow-create filterable default-first-option
            placeholder="当前液位" size="small" style="width: 100px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="values" placement="bottom" allow-create filterable default-first-option
            placeholder="降雨量" size="small" style="width: 100px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="values" placement="bottom" allow-create filterable default-first-option
            placeholder="降雨时间" size="small" style="width: 100px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
          <div style="color: #fff; font-size: 8px;">
            当前液位：
            <el-input v-model="num1" @input="handleChange" :min="0" :max="100" placeholder="请输入当前液位"
              style="width: 93px;" />
          </div>
          <div style="color: #fff; font-size: 8px;">
            降雨量：
            <el-input v-model="num2"
              :disabled="num1 && Number(num1) > 0 && tableData[0].dangqiankurong > 0 ? false : true"
              @input="changeRainfall" placeholder="请输入降雨量" style="width: 93px;" />
          </div>
          <div style="color: #fff; font-size: 8px;">
            时间长度：
            <el-input v-model="num3" @input="timeChange" :disabled="num2 && Number(num1) > 0 ? false : true"
              placeholder="请输入时间长度" style="width: 93px;" />
          </div>

        </div>
        <el-table :data="tableData" border style="width: 300px" align="center">
          <el-table-column prop="dangqiankurong" label="当前库容" width="50">
            <template #default="scope">
              <span>{{ scope.row.dangqiankurong }}&nbsp;&nbsp;万m<sup>3</sup></span>
            </template>
          </el-table-column>
          <el-table-column prop="shijirukuliang" label="实际入库量" width="50">
            <template #default="scope">
              <span>{{ scope.row.shijirukuliang }}&nbsp;&nbsp;m<sup>3</sup></span>
            </template>
          </el-table-column>
          <el-table-column prop="kurongbianhua" label="库容变化" width="70">
            <template #default="scope">
              <span>{{ scope.row.kurongbianhua }}&nbsp;&nbsp;m<sup>3</sup></span>
            </template>
          </el-table-column>
          <el-table-column prop="shijirukurong" label="实际库容" width="65">
            <template #default="scope">
              <span>{{ scope.row.shijirukurong }}&nbsp;&nbsp;m<sup>3</sup></span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="honghuicha" label="距离设计洪水位差" width="40">
            <template #default="scope">
              <span>{{ scope.row.honghuicha }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="jiaoyanhongshuicha" label="距离校核洪水位差">
            <template #default="scope">
              <span>{{ scope.row.jiaoyanhongshuicha }}&nbsp;&nbsp;&nbsp;m<sup>3</sup></span>
            </template>
          </el-table-column>
        </el-table>
        <WaterChart :scale="scale" :yCoordinate="yCoordinate" :xCoordinate="xCoordinate"></WaterChart>
        <div style="margin-top: 20px;">
          <secondary-title text="天气预报"></secondary-title>
        </div>
        <!-- <img style="width: 300px" src="@/assets/images/shuiwu/left/zuo12.png" alt=""> -->
        <weatherForecast :scale="scale"></weatherForecast>
        <div>
          <FirstLevelTitle text="实时雨情"></FirstLevelTitle>
        </div>
        <img style="width: 300px" src="@/assets/images/shuiwu/left/zuo11.png" alt="">
      </div>
    </template>
  </ScalablePage>
  <div style="width: 80%;">
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, reactive } from "vue";
import { yeWeiApi } from "@/utils/shuiwu/api"
import ScalablePage from '@/components/ScalablePage.vue'; // 引入组件
import { shortPolling } from "@/utils/Polling";
import FixedSlider from './FixedSlider.vue';
import WaterChart from './WaterChart.vue';
/**
 * 天气预报组件
 */
import weatherForecast from "../components/weather-forecast.vue";
import dataList from "./data.json";
import floodDischarge from "./floodDischarge.json";

const value = ref(0)
const values = ref('')
const num1 = ref('')
const num2 = ref('')
const num3 = ref(1)
// 图表的纵坐标数据
const yCoordinate = ref([]);
// 图表的横坐标数据
const xCoordinate = ref([]);

const tableData = ref([
  {
    dangqiankurong: 0,
    shijirukuliang: 0,
    kurongbianhua: 0,
    shijirukurong: 0,
    honghuicha: 0,
    jiaoyanhongshuicha: 0,
  }
])

const state = reactive({
  yewei: [],
  datenum: '',
  line: 0
})

let { line } = toRefs(state)

/**
 * 
 * @param value 根据当前液位获取当前库容
 */
const handleChange = (value: any) => {
  dataList.forEach((item: any) => {
    if (item.key == value) {
      dataList.forEach((item: any) => {
        if(value <=item.key) {
          yCoordinate.value.push(item.key)
          xCoordinate.value.push(item.value)
        }
      })
      tableData.value[0].dangqiankurong = item.value
    }
  })
  changesStorageCapacity(value)
}

const timeChange = (value: any) => {
  changeRainfall(num2.value)
}


/**
 * 库容变化：实际入库量 - 上游库水位*计算流量*60*60
 */
const changesStorageCapacity = (value: any) => {
  floodDischarge.forEach((itemv2: any) => {
    if (value == itemv2.key || itemv2.key == Math.round(value)) {
      const storageCapacityData = (tableData.value[0].shijirukuliang - (itemv2.value * 60 * 60)).toFixed(3)
      tableData.value[0].kurongbianhua = Number(storageCapacityData)
      actualStorageCapacity(itemv2.value)
    } 
    // throw new Error('break')
    // else {
    //   tableData.value[0].kurongbianhua = 0
    // }
  })
}


/**
 * 实际库容：当前库容 + 库容变化
 */
const actualStorageCapacity = (value: any) => {
  const storageCapacityData = (Number(tableData.value[0].dangqiankurong) * 10000 + Number(tableData.value[0].kurongbianhua)).toFixed(3)
  tableData.value[0].shijirukurong = Number(storageCapacityData)
  /**
 * 设计洪水差：设计洪水库容1171.6(62.9) - 实际库容
 */
  const designFloodDifferenceData = (629000 - tableData.value[0].shijirukurong).toFixed(3)
  tableData.value[0].honghuicha = Number(designFloodDifferenceData)
  /**
 * 距离校验洪水差：校验洪水水库容1171.6(62.9) - 实际库容
 */  const designFloodDifferenceData2 = (6665000 - tableData.value[0].shijirukurong).toFixed(3)
  tableData.value[0].jiaoyanhongshuicha = Number(designFloodDifferenceData2)
}


/**
 * 实际入库量：原设计报告数据 * 水文查询数据*（1-蒸发、渗漏、用水等总损失比例）*时间长度*降水量
 */
const changeRainfall = (value: any) => {
  if (Number(value) > 0) {
    const actual = ((125 * 0.042 * (1 - 0.958) * 1 * num3.value) * Number(value)).toFixed(3) // 实际入库量
    tableData.value[0].shijirukuliang = actual
  } else {
    tableData.value[0].shijirukuliang = 0
  }
  changesStorageCapacity(num1.value)
}





onMounted(() => {
  shortPolling(() => getYeWei(632), 10000);
});

async function getYeWei(id: number) {
  yeWeiApi(id).then(res => {
    let arr = res.rows as any;

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4378) {
        state.datenum = arr[i].ts
        state.line = arr[i].value;
        let str = String(arr[i].value);
        for (let i = 0; i < (7 - str.length); i++) {
          str = "0" + str
        }
        state.yewei = str.split('')
        return
      }
    }

  })
}


/**
 * 查找data中最接近目标值的值，如果刚好存在则直接返回
 * @param input 输入的数值
 * @param epsilon 可选精度误差（默认为1e-6）
*/
// function findClosestValue(input: number, epsilon = 1e-6): number {
//   // 先尝试找到精确或近似相等的数
//   for (const value of data) {
//     if (Math.abs(valu                                                                                                                      e - input) < epsilon) {
//       return value
//     }
//   }

//   // 没有找到，则返回                                                                                                                                                                                                                                  最接近的值
//   let closest = data[0]
//   let minDiff = Math.abs(input - closest)

//   for (const value of data) {
//     const diff = Math.abs(input - value)
//     if (diff < minDiff) {
//       closest = value
//       minDiff = diff
//     }
//   }

//   return closest
// }

// console.log(findClosestValue(160.1)) // 输出: 160.1
// console.log(findClosestValue(93)) // 输出: 160.1（最接近）


const marks = {
  0: '0',
  10: '10',
  20: '20',
  30: '30',
  40: '40',
  50: '50',
  60: '60',
  70: '70',
  80: '80',
  90: '90',
}

const options = [
  {
    value: '1',
    label: '1小时',
  },
  {
    value: '2',
    label: '2小时',
  },
  {
    value: '5',
    label: '5小时',
  },
  {
    value: '15',
    label: '15小时',
  },
  {
    value: '24',
    label: '24小时',
  },

]
</script>

<style lang="less" scoped>
@import '@/assets/common/font.css';

.resolution {
  .First-img {
    width: 324px;
    height: 26px;
  }

  .secondary-img {
    width: 171px;
  }
}

.water-situation {
  margin-top: 8px;
  width: 205px;
  height: 97px;
  background-image: url(@/assets/images/shuiwu/left/zuo13_v3.png);
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  color: #fff;
  position: relative;
}

.sedimentation {
  // 长城调蓄水池样式
  margin-top: 8px;
  width: 255px;
  height: 97px;
  background-image: url(@/assets/images/shuiwu/left/zuo14_v2.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
}


.dashed-text-1 {
  display: flex;
  font-size: 6px;
  align-items: center;
  width: 116px;
  position: absolute;
  top: 25px;
  left: 19px;
}

.dashed-text-1::before,
.dashed-text-1::after {
  content: "";
  flex: 1;
  border-bottom: 0.5px dashed rgb(255, 0, 0);
  margin: 0 1px;
}

.dashed-text-1::before {
  flex: 1.3;
  /* 左边的虚线更长 */
}

.dashed-text-1::after {
  flex: 1;
  /* 右边的虚线更短 */
}

.dashed-text-2 {
  display: flex;
  font-size: 6px;
  align-items: center;
  width: 112px;
  position: absolute;
  top: 30px;
  left: 22px;
}

.dashed-text-2::before,
.dashed-text-2::after {
  content: "";
  flex: 1;
  border-bottom: 0.5px dashed rgb(255, 255, 255);
  margin: 0 1px;
}

.dashed-text-2::before {
  flex: 1.3;
}

.dashed-text-2::after {
  flex: 1;
}


.slider-demo-block {
  display: flex;
  width: 200px;
  margin-top: 20px;
  margin-bottom: 5px;
  column-gap: 10px;
}

:deep(.is-pure) {
  width: 200px !important;
}

:deep(.el-table) {
  font-size: 8px !important;
  background-color: #ffffff00;
}

:deep(.el-table .cell) {
  line-height: 9px;
  padding: 0 0px;
}

:deep(.el-table .el-table__cell) {
  padding: 4px 0;
}

:deep(.el-input) {
  font-size: 8px
}

:deep(.el-input__inner) {
  height: 16px;
  line-height: 16px;
}

:deep(.el-input__wrapper) {
  border-radius: 0px;
  background-color: #ffffff00;
}

:deep(.el-table th.el-table__cell) {
  background-color: #ffffff00;
}

:deep(.el-table tr) {
  background-color: #ffffff00;
}
</style>
